/* eslint-disable react/no-unused-state */
/* eslint-disable jsx-quotes */
/* eslint-disable no-unused-vars */
import { Component } from "react";
import { View, Text,Image ,ScrollView,Swiper,SwiperItem} from "@tarojs/components";
import Taro ,{usePageScroll}from "@tarojs/taro";
import cai_list from "../../static/cai";
import request from "../../utils/http";
import Navbbar from "../../components/Navbbar";
import Productitem from "../../components/Productitem";
import tools from "../../utils/tools";
import "./index.less";



export default class Index extends Component {
  state = {
    classify_list: cai_list,
    reCommendlist: [],
    weeklist: [],
    isFix:false
  };
  componentDidMount() {
    console.log(1111)
    request(1, "get", "/api/getrecommend", {}).then((res) => {
      this.setState({
        reCommendlist: [...res],
      });
      console.log(this.state,2222);
    });
    request(1,'get','/api/week',{}).then(res=>{
      this.setState({
        weeklist: [...res],
      });
    })
  }
  handleScoll = (e) => {
    if(e.detail.scrollTop>199.1999969482422)
    {
      this.setState({isFix:true})
    }else{
      this.setState({isFix:false})
    }
    console.log(this.state.isFix)
  }
  gotoSearch = ()=>{
    Taro.navigateTo({
      url:'../search/index'
    })
  }
  handleWeek = (id)=>{
    Taro.navigateTo({
      url:`../detail/index?id=${id}`
    })
  }
  handleCollect = (info)=>{
    var obj = {...info}
    delete obj.num
    console.log(obj)
    Taro.request({
      url: 'http://127.0.0.1:3007/api/add',
      method: 'POST',
      data:obj,
      success: function (res) {
        console.log(res,11)
      }
    })
    // if(tools.tGet('collectList'))
    // {
    //   var arr = tools.tGet('collectList')
    //   arr.unshift(info)
    //   tools.tSet('collectList',arr)
    // }
    // else{
    //   tools.tSet('collectList',[info])
    // }
  }

  render() {
    return (
      <ScrollView  scrollY scrollWithAnimation onScroll={(e)=>this.handleScoll(e)} style={{height:'100vh'}}>
      <View>
        <View className={this.state.isFix?'isFix':''}>
        <Navbbar type={1}></Navbbar>
        <View className="input_box" onClick={()=>this.gotoSearch()}>
          <View className="input_parent">
            <View className="searchIcon"></View>
            牛肉
          </View>
        </View>
        </View>
        <View className="content">
          <View className="content_top">
            {this.state.classify_list.map((item) => {
              return (
                <View key={item.id} className="one_classify">
                  <image src={item.src}></image>
                  <View className="font">{item.name}</View>
                </View>
              );
            })}
          </View>
          <View className="bannr_img title_common"></View>
          <View className="banner">
            <Swiper className="Swiper" indicatorDots indicatorColor="rgba(255, 255, 255, .8)" indicatorActiveColor autoplay duration circular>
            {this.state.reCommendlist &&
              this.state.reCommendlist.map((item) =>{
                return (
                  <SwiperItem key={item.id} className='banner_item'>
                    <image src={item.src} mode='scaleToFill' lazyLoad></image>
                  </SwiperItem>
                )
              })}
            </Swiper>
         </View>
         <View className="title_common re_title"></View>
         <View>
              {
                this.state.weeklist&&this.state.weeklist.map(item=>{
                  return  <Productitem obj={item} key={item.id} goto={this.handleWeek} collect={this.handleCollect}></Productitem>
                })
              }
         </View>
        </View>
      </View>
      </ScrollView>
    );
  }
  
}
